<template>
  <div class="lx-image">
    <div class="mask" v-if="showMask">
      <img :src="task.src">
    </div>
    <div class="content flex">
      <el-image :src="task.src" class="image" alt="Task Image" :preview-src-list="[task.src]" hide-on-click-modal/>
      <div class="desc">
        <div>
          <div class="title">请你回答以下问题:</div>
          <div class="row">1.这可能是什么？</div>
          <div class="row">2.图片的哪个部位让你想到那个东西？</div>
          <p>提示: 请您尽可能的详细描述自己的想法。</p>
        </div>

        <el-button style="width: 1.1rem; height: 36px;" type="primary" size="large" @click="recordingModel=true">开始回答</el-button>
      </div>
    </div>
    <TaskProcess/>
    <RecordingModel
        v-model="recordingModel"
        :video-name="generateVideoName() + '_回答罗夏墨迹任务'"
        uploadFolder="recording"
        @confirm="reportModel = true"
    />
    <ReportModel
        v-model="reportModel"
        :key="Date.now()"
        :jsonName="generateVideoName() + '_回答罗夏墨迹表单'"
        uploadFolder="task-json"
        :task="props.task"
    />
  </div>
</template>
<script setup>
import {defineProps, ref, onMounted} from 'vue'
import { useVideoRecorder } from '@/hooks/useVideoRecorder'
import  useUserStore  from '@/stores/user'
import RecordingModel from "@/views/task/component/Report/RecordingModel.vue";
import ReportModel from "@/views/task/component/Report/ReportModel.vue";
import { ElMessage } from 'element-plus'
import TaskProcess from "@/views/task/component/TaskProcess.vue";

const props = defineProps({
  task: {
    type: Object,
    required: true
  }
})

const userStore = useUserStore()
//全屏蒙版显示
const showMask = ref(false)
//回答弹窗显示
const recordingModel = ref(false)
//表单弹窗
const reportModel = ref(false)


// 生成视频文件名
// 生成视频文件名
const generateVideoName = () => {
  const timestamp = Date.now();
  return `${userStore.userInfo.data.account}_${props.task.id}_${timestamp}`;
};

// 使用视频录制hooks
const { startRecording, stopAndUpload} = useVideoRecorder({
  uploadFolder: 'wacheVideo',
  videoName: generateVideoName() + '_观看罗夏墨迹图片'
});



onMounted(async () => {
  showMask.value = true
  // 开始录制视频
  await startRecording()
  
  setTimeout(async () => {
    showMask.value = false
    // 停止录制并上传视频
   await stopAndUpload()
  }, 10000)
})
</script>
<style scoped lang="scss">
.lx-image{
  height: 100%;
  width: 100%;
  position: relative;

  .mask{
    position:  absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    background: rgba(0,0,0,.5);
    img{
      height: 100%;
      width: auto;
    }
  }

  .content{
    padding: .6rem .6rem;
    .image{
      width: 200px;
      height: 240px;
    }
    .desc{
      height: 100%;
      padding-left: .3rem;
      display: flex;
      flex-direction: column;
      justify-content:  space-between;
      .title{
        font-size: 24px;
        margin-bottom: 24px;
      }
      .row{
        font-size: 18px;
        margin-bottom: 24px;
      }
      p{
        font-size: 14px;
        margin: 24px 0;
      }
    }
  }
}
</style>